@layout("/common/_container.html"){

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">

                    <div class="ibox-tools">
                        员工：<input type="text" class="layer-date" id="empChoice"/>
                        <button onclick="selectEmp()">选择</button>
                        <input type="hidden" id="empCodes">
                        年度： <input type="text" class="layer-date" id="year"/>
                        <button onclick="load()" class="layui-btn layui-btn-normal layui-btn-xs">确定</button>

                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="point_range" style="height: 500px">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    laydate.render({
        elem: '#year', //指定元素
        istime: 'false',
        type:'year',
        value:$("#year").val()
    });

    function load(){
        var param = {};
        debugger;
        var empCodes=$("#empCodes").val();
//        for(var i=0;i<empCodesStr.length;i++){
//            if(empCodesStr[i]!=""){
//                empCodes.push(empCodesStr[i]);
//            }
//        }
        param.year = $("#year").val();
        param.empCodes = empCodes;
        var pipChart = echarts.init(document.getElementById('point_range'));
        var ajax = new $ax(Feng.ctxPath + "/analysis/pointRange", function (data) {
            var result = JSON.parse(data.data);
            var fields=result.fields;
            var value=result.value;
            var option = {
                title : {
                    text: '积分范围',
                    subtext: '十一小类',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 40,
                    top: 100,
                    data:fields
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'培训类别',
                        type:'pie',
                        radius: [60, '70%'],
                        center : ['50%', '50%'],
                        roseType : 'radius',
                        label: {
                            normal: {
                                formatter: '{b}：{c}分  {per|{d}%}  ',
                                backgroundColor: '#eee',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                borderRadius: 4,

                                rich: {
                                    a: {
                                        color: '#999',
                                        lineHeight: 22,
                                        align: 'center'
                                    },

                                    hr: {
                                        borderColor: '#aaa',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    b: {
                                        fontSize: 16,
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#eee',
                                        backgroundColor: '#334455',
                                        padding: [2, 4],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                smooth: true,
                                lineStyle: {
                                    width: 2
                                }
                            }
                        },
                        data:value
                    }
                ]
            };
            pipChart.setOption(option);
        });
        ajax.set(param);
        ajax.start();
    }

    var selectEmp = function () {
        layer.open({
            type: 2,
            area: ['700px', '400px'],
            fixed: false, //不固定
            maxmin: true,
            content: Feng.ctxPath + '/employee/select_list_checkbox',
            btn: ['确定','关闭'],
            yes: function(index, layero){
                $("#empChoice").val("");
                $("#empCodes").val("");
                var res = window["layui-layer-iframe" + index].Employee.callbackdata();
                for (var i=0;i<res.length;i++){
                    if($("#empCodes").val()!=""){
                        $("#empCodes").val($("#empCodes").val()+",");
                    }
                    $("#empCodes").val($("#empCodes").val()+res[i].empCode);

                    if($("#empChoice").val()!=""){
                        $("#empChoice").val($("#empChoice").val()+",");
                    }
                    $("#empChoice").val($("#empChoice").val()+res[i].empName);
                }
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            },
            cancel: function(index, layero){
                return false;
            }
        });
    };

    $(function(){
        load();
    });
</script>
@}